<template>
<div>
    <el-form>
        <el-row :gutter="20">
            <el-col :span="6" :offset="0">
                <el-form-item label="单据编号：">
                    <el-input v-model="purchase.number" placeholder="请输入单据编号查询"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
                <el-form-item label="商品信息：">
                    <el-input v-model="purchase.commodities" placeholder="条码|名称|规格|型号"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
                <el-form-item label="单据日期：">
                    <div class="demo-date-picker">
                        <div class="block">
                            <el-date-picker v-model="billDate" 
                            style="width: 94%;" 
                            format="YYYY-MM-DD HH:mm:ss"
                            type="datetimerange" 
                            range-separator="~" 
                            value-format="YYYY-MM-DD HH:mm:ss"
                            start-placeholder="开始时间" 
                            end-placeholder="结束时间" 
                            prefix-icon="display" />
                        </div>
                    </div>
                </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
                <el-form-item>
                    <el-button type="primary" @click="init">查询</el-button>
                    <el-button @click="reset">重置</el-button>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>

    <el-table :data="page.records" border stripe 
    highlight-current-row>
        <el-table-column width="55" align="center">
            <template #default="scope">
                <el-radio
                v-model="selectedRowId"
                :label="scope.row.id"
                @change="onRadioChange(scope.row)"
                ></el-radio>
            </template>
        </el-table-column>
        <el-table-column label="供应商" prop="supName" width="100" align="center"/> 
        <el-table-column label="单据编号" prop="number" align="center"/> 
        <el-table-column label="商品信息" prop="materialName" align="center"/>
        <el-table-column label="单据日期" prop="operTime" align="center"/> 
        <el-table-column label="操作员" prop="username" width="80" align="center"/> 
        <el-table-column label="数量" prop="totalQuantity" width="80" align="center"/> 
        <el-table-column label="金额合计" prop="totalPrice" width="100" align="center"/> 
        <el-table-column label="含税合计" prop="discountLastMoney" width="100" align="center"/>
        <el-table-column label="状态" width="100" align="center">
            <template #default="scope">
                <el-tag v-if="scope.row.status == 1" type="success" effect="light">已审核</el-tag>
                <el-tag v-else-if="scope.row.status == 3" type="primary" effect="light">部分采购</el-tag>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination 
        v-model:page-size="page.size" 
        v-model:current-Page="page.current"
        @current-change="init"
        @size-change="init"
        :page-sizes="[5, 10, 15]" 
        layout="total, prev, pager, next, sizes, jumper" 
        :total="page.total" 
        style="float: right;margin-top: 10px;">
    </el-pagination>
    <!-- 按钮 -->
    <form>
        <el-row :gutter="20" style="height: 30px">
        <el-col :span="24" :offset="0">
            <el-form-item style="position: fixed;bottom: 130px; right: 330px;">
                <el-button @click="close">关闭</el-button>
                <el-button type="primary"
                @click="saveSelected({ cname: '选择单据明细' })">确定</el-button>
            </el-form-item>
        </el-col>
        </el-row>
    </form>
    <!-- 弹窗 -->
    <el-dialog
      :destroy-on-close="true"
      :title="title"
      v-model="visible"
      width="65%"
      top="15vh"
      style="height: 750px"
    >
      <Documentdetails 
      :key="data" :data="data" 
      @close="close" @items="items"></Documentdetails>
    </el-dialog>
</div>
</template>

<script setup>
import { reactive, ref, defineEmits } from 'vue';
import request from '@/api/request';
import { ElMessage } from 'element-plus';
import Documentdetails from './Documentdetails.vue';

//调用父页面方法
let emits = defineEmits(["close","subdocument"]);
//查询参数
let purchase = ref({})
//该行id
let selectedRowId = ref(null)

//时间
let billDate = ref([])
const visible = ref(false);
const title = ref("");

const data = ref(-1);

let page = ref([]);

let close = () => {
    emits('close');
};

//初始化
let init = () =>{
    if(billDate.value){
        purchase.value.startTime=billDate.value[0];
        purchase.value.endTime=billDate.value[1];
    }
    purchase.value.current=page.value.current;
    purchase.value.size=page.value.size;
    purchase.value.subType="采购";
    purchase.value.relevancy="关联";
    request({
        url: '/purchase/order/PurchaseFindByPage',
        method: "post",
        data: purchase.value
    }).then(res => {
        page.value = res.data
    })
}
init();

//重置
let reset = () =>{
    purchase.value = ({})
    billDate.value = ([])
    init();
}

let header = ref({})

//接收子单据数据，再传给父页面
let items = (item) => {
    // console.log("header值",header);
    // console.log("items值",item);
    emits('subdocument', item,header.value);
}

// 处理单选框变化事件
let onRadioChange = (row) => {
    header.value = row;
}

//确定按钮
let saveSelected = (menu) => {
    if (selectedRowId.value == null) {
        ElMessage.warning('请选择一个商品');
        return;
    }
    data.value = selectedRowId.value;
    title.value = menu.cname;
    visible.value = true;
};
</script>
<style scoped>
</style>